<template>
	<div class="page template-create">
		<div class="project-list-header">
			<div class="project-list-cancel" @click="onGoback">
				<i class="el-icon-arrow-left"></i>返 回
			</div>
			<!-- <div>模板选择</div> -->
		</div>
		<div class="project-list_body">
			<el-container>
				<el-aside width="300px">
					<div class="templateArea">
						<div>
							<!-- <div class="project-list_item"> -->
							<!-- <y-button text="创建项目" :width="130" @click="onNewProject"></y-button> -->
							<!-- </div> -->
							<div
								class="project-list_item"
								v-for="(template, index) in templateList"
								:key="index"
								@click="onPreview(template, index)"
								:class="{ 'project-list_active': index === templateIndex }"
							>
								<div class="project_list_item_proimg_wrap">
									<img
										:src="template.thumbnailImage"
										class="project_list_item_proimg"
									/>
									<!-- <div class="project_list_item_operator_wrap">
										<div class="project_list_item_operator_middle">
											<div class="project_list_item_edit" @click="onTemplateCreate" :data-id="template._id">
												创建项目
											</div>
											<div class="project_list_item_preview" @click="onPreview" :data-id="template._id">预览</div>
										</div>
									</div> -->
								</div>
								<div class="project_list_item_name_wrap">
									<div class="project_list_item_left">
										{{ template.title }}模板
									</div>
									<div class="project_list_item_right">
										<!-- <div>比例 16：9</div> -->
										<div>
											{{ `${template.screenWidth}x${template.screenHeight}px` }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-aside>
				<el-main>
					<div class="iframeTitle" v-show="iframeTitle">
						<div>
							{{ iframeTitle }}
							<span>（分辨率{{ iframeWidth }}*{{ iframeHeight }}）</span>
						</div>
						<div>
							<el-button type="primary" round @click="submitCreate" size="small"
								>确认创建</el-button
							>
						</div>
					</div>
					<iframe
						:src="iframeSrc"
						frameborder="0"
						width="100%"
						v-if="iframeSrc"
						height="100%"
					></iframe>
					<div v-else class="newTemplete"></div>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			templateList: [],
			iframeSrc: "",
			iframeTitle: "通用大屏",
			iframeWidth: "1920",
			iframeHeight: "1080",
			templateIndex: 0,
			templateId: "",
		};
	},
	mounted() {
		this.getTemplateList();
	},
	methods: {
		getTemplateList() {
			this.$axios.get("/project/myTemplate").then((res) => {
				if (res.code === 200) {
					let data = res.body;
					data.unshift({
						title: "通用大屏",
						screenWidth: "1920",
						screenHeight: "1080",
					});
					this.templateList = data;
				}
			});
		},
		onGoback() {
			this.$router.history.go(-1);
		},
		onNewProject() {
			this.$router.push({
				name: "PowerEditor",
			});
		},
		submitCreate() {
			if (!this.iframeSrc) {
				this.onNewProject();
			} else {
				this.onTemplateCreate(this.templateId);
			}
		},
		onTemplateCreate(_id) {
			// console.log(e.currentTarget.dataset)
			// let _id = e.currentTarget.dataset.id
			//先复制项目再跳转
			this.$axios.post("/project/copy/" + _id).then((res) => {
				if (res.code === 200) {
					let project = res.body;
					this.$router.push({
						name: "PowerEditor",
						params: {
							id: project._id,
						},
					});
				}
			});
		},
		onPreview(template, index) {
			this.templateIndex = index;
			// let _id = e.currentTarget.dataset.id
			// window.open(`${this.$config.serverURl}/project/view/${_id}`, '_blank')
			this.iframeTitle = template.title || "通用大屏";
			this.iframeWidth = template.screenWidth || "1920";
			this.iframeHeight = template.screenHeight || "1080";
			this.iframeSrc = "";
			this.templateId = "";
			if (template._id) {
				this.templateId = template._id;
				this.iframeSrc = `${this.$config.serverURl}/project/view/${template._id}`;
			}
		},
	},
};
</script>

<style lang="stylus" scoped>
>>> {
	.el-main {
		height: calc(100vh - 65px);
		overflow: hidden;
		padding: 0 20px;
	}
	.el-aside {
		height: calc(100vh - 65px);
	}
}
</style>
<style lang="stylus">
.iframeTitle {
	height: 44px;
	color: #fff;
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	span {
		font-size: 14px;
	}
}
.template-create {
	background: rgb(23, 30, 42);
	.project-list-header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 45px;
		background: #2D2E32;
		// border-bottom: 2px solid rgb(31, 78, 145);
		.project-list-cancel {
			color: #fff;
			font-size: 12px;
			margin-left: 10px;
			cursor: pointer;
			i {
				margin-right: 8px;
			}
			&:hover {
				color: rgb(36, 131, 255);
			}
		}
	}
	.project-list_tag_wrap {
		height: 27px;
		margin-top: 39px;
		margin-bottom: 10px;
		margin-left: 60px;
		.project-list_tag {
			width: 115px;
			height: 27px;
			line-height: 27px;
			text-align: center;
			font-size: 13px;
			background: rgb(38, 129, 255);
			color: #fff;
		}
	}
	/**
	 *   模板列表
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																														    * */
	.project-list_body {
		margin: 20px 20px;
		.templateArea {
			overflow: auto;
			height: 100%;
			>div {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.project-list_item {
			cursor: pointer;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #0b216b;
			color: rgb(165, 200, 226);
			height: 180px;
			width: 235px;
			border: 2px solid rgb(58, 70, 89);
			margin-left: 10px;
			margin-top: 10px;
			&.project-list_active {
				border: 2px solid rgb(25, 105, 187);
				box-shadow: 0px 4px 6px 0px rgba(54, 66, 255, 0.5);
			}
			&:hover {
				border: 2px solid rgb(25, 105, 187);
				.project_list_item_proimg_wrap .project_list_item_operator_wrap {
					opacity: 1;
				}
			}
			/**
			 *   项目创建窗口
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																									            * */
			/**
			 *   项目信息详细窗口
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										            * */
			.project_list_item_proimg_wrap {
				position: relative;
				display: flex;
				height: 100%;
				width: 100%;
				.project_list_item_operator_wrap {
					background: rgba(5, 5, 7, 0.6);
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
					bottom: 0;
					opacity: 0;
					.project_list_item_operator_middle {
						display: flex;
						flex-direction: column;
						justify-content: center;
						height: 100%;
						align-items: center;
						.project_list_item_edit, .project_list_item_preview {
							width: 115px;
							height: 33px;
							line-height: 33px;
							text-align: center;
							background: rgb(38, 129, 255);
							color: #fff;
							cursor: pointer;
							&:hover {
								opacity: 0.8;
							}
						}
						.project_list_item_preview {
							background: none;
							border: 1px solid rgb(38, 129, 255);
							&:hover {
								background: rgb(38, 129, 255);
								opacity: 1;
							}
							margin-top: 10px;
						}
					}
				}
			}
			.project_list_item_name_wrap {
				display: flex;
				flex-direction: row;
				width: 100%;
				color: rgb(172, 188, 196);
				background: rgb(29, 38, 46);
				height: 50px;
				align-items: center;
				font-size: 13px;
				.project_list_item_left {
					width: 100%;
					color: rgb(254, 254, 254);
					margin-left: 10px;
					overflow: hidden;
				}
				.project_list_item_right {
					width: 180px;
					font-size: 14px;
					text-align: right;
					font-family: 'youdu' !important;
					font-style: normal;
					-webkit-font-smoothing: antialiased;
					-webkit-text-stroke-width: 0.2px;
					-moz-osx-font-smoothing: grayscale;
					color: rgb(108, 128, 134);
					margin-right: 10px;
				}
			}
		}
	}
}
.newTemplete {
	height: 100%;
	width: 100%;
	background: #0b216b;
}
</style>
